.container{
    width: 500px;
    height: 500px;
    margin: 50px auto;
    border:1px solid rgb(207, 188, 188);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(247, 230, 183);
}
.tablecontainer{
    width: 92%;
    height: 92%;
    /* 设置表格的行列之间没有间隙 */
    border-collapse: collapse;
}
.tablecontainer td{
    border: 1px solid black;
    position: relative;
}
/* 棋子公共样式 */
.tablecontainer td div{
    border: 1px solid lightgray;
    border-radius: 50%;
    position: absolute;
    width: 90%;
    height: 90%;
    color: lightgray;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lefttop{
    left: -50%;
    top:-50%;
}
.righttop{
    right: -50%;
    top:-50%;
}
.leftbottom{
    left: -50%;
    bottom:-50%;
}
.rightbottom{
    right: -50%;
    bottom:-50%;
}
/* 白棋子 */
.white{
    background-color:white
}
/* 黑棋子 */
.black{
    background-color:black;
}
.tablecontainer td div.win{
    border: 1px solid red;
}